@extends('home.parent')
@section('title','客户设置')
@section('head_js')
@endsection
@section('head_css')
<link rel="stylesheet" href="{{ asset('/css/dataTables.bootstrap.css') }}">
@endsection
@section('content')
<div class="content-wrapper">
  <section class="content-header">
    <h1>
      @if ($admin_type == 0)
        客户设置
      @elseif ($admin_type == 1)
        客服客户设置
      @elseif ($admin_type == 2)
        销售客户设置
      @elseif ($admin_type == 3)
        合伙人客户设置
      @elseif ($admin_type == 4)
        KA客户设置
      @else
        客户设置
      @endif
       <small></small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="{{URL('admin')}}"><i class="fa fa-dashboard"></i> 首页</a></li>
      <li><a href="{{URL('admin/service/list')}}">登录账号</a></li>
      <li class="active">
        @if ($admin_type == 0)
          客户设置
        @elseif ($admin_type == 1)
          客服客户设置
        @elseif ($admin_type == 2)
          销售客户设置
        @elseif ($admin_type == 3)
          合伙人客户设置
        @elseif ($admin_type == 4)
          KA客户设置
        @else
          客户设置
        @endif
      </li>
    </ol>
  </section>
  <section class="content">
    <div class="row">
      <div class="col-xs-12">
        <div class="box">
          <div class="box-header">
            <a href="{{URL('admin/service/list')}}" class="btn btn-default"><i class="fa fa-reply"></i> 返回</a>
            <br>
            
             <div class="form-inline pull-right">
                <fieldset>
                  <div class="input-group input-group-sm">
                    <span class="input-group-addon"><strong>用户编号</strong></span>
                    <input class="form-control" style="width:100px;" id="top_search_user_id" >
                  </div>
                  <div class="input-group input-group-sm">
                    <span class="input-group-addon"><strong>手机号</strong></span>
                    <input class="form-control" style="width:100px;" id="top_search_mobile" >
                  </div>
                    <div class="input-group input-group-sm">
                    <span class="input-group-addon"><strong>姓名</strong></span>
                    <input class="form-control" style="width:100px;" id="top_search_real_name" >
                  </div>
                    <div class="input-group input-group-sm">
                    <span class="input-group-addon"><strong>昵称</strong></span>
                    <input class="form-control" style="width:100px;" id="top_search_nick_name" >
                  </div>
                  <div class="input-group input-group-sm" style="margin-left: 30px;">
                    <div class="input-group-btn" >
                      <button type="button"  class="btn btn-primary" onclick="searchTopData()"><i class="fa fa-search"></i></button>
                    </div>
                  </div>

                </fieldset>
              </div>
            
            
            <p class="lead"></p>
          </div>
          <div class="box-body">
            <table id="data_list" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th>编号</th>
                  <th>销售</th>
                  <th>客服</th>
                  <th>城市合伙人</th>
                  <th>KA</th>
                  <th>头像</th>
                  <th>用户类型</th>
                  <th>昵称</th>
                  <th>真实姓名</th>
                  <th>手机号码</th>
                  <th>公司</th>
                  <th>职位</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
              <tfoot>
                <tr>
                  <th>编号</th>
                  <th>销售</th>
                  <th>客服</th>
                  <th>城市合伙人</th>
                  <th>KA</th>
                  <th>头像</th>
                  <th>用户类型</th>
                  <th>昵称</th>
                  <th>真实姓名</th>
                  <th>手机号码</th>
                  <th>公司</th>
                  <th>职位</th>
                  <th>操作</th>
                </tr>
              </tfoot>
            </table>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
    </div>
  </section>
  <section class="content">
    <div class="row">
      <div class="col-xs-12">
        <div class="box">
          <div class="box-header">
            <div class="form-inline pull-left">
              <fieldset>
                <div class="input-group input-group-sm" >
                  <span class="input-group-addon"><strong>编号</strong></span>
                  <input type="text" style="width: 100px;" class="form-control" id="search_user_id">
                </div>

                <div class="input-group input-group-sm">
                  <span class="input-group-addon"><strong>用户类型</strong></span>
                  <select class="form-control select2" style="width: 120px;" id="search_user_type">
                    <option value="-1">用户类型</option>
                    <option value="0">普通用户</option>
                    <option value="1">会员</option>
                    <option value="2">分享嘉宾</option>
                  </select>
                </div>
                <div class="input-group input-group-sm" >
                  <span class="input-group-addon"><strong>昵称</strong></span>
                  <input type="text" style="width: 100px;" class="form-control" id="search_nick_name">
                </div>
                <div class="input-group input-group-sm" >
                  <span class="input-group-addon"><strong>姓名</strong></span>
                  <input type="text" style="width: 100px;" class="form-control" id="search_real_name">
                </div>
                <div class="input-group input-group-sm" >
                  <span class="input-group-addon"><strong>手机号</strong></span>
                  <input type="text" style="width: 100px;" class="form-control" id="search_mobile">
                </div>
                <div class="input-group input-group-sm" style="margin-left: 30px; padding-top: 20px;">
                  <div class="input-group-btn" >
                    <button type="button"  style="height: 35px;width: 35px;" class="btn btn-primary" onclick="searchData()"><i class="fa fa-search"></i></button>
                  </div>
                </div>
                <br>

                <div class="input-group input-group-sm">
                  <select class="form-control select2" style="width: 150px;" id="search_user_country">
                    <option value="0">选择地区</option>
                    @if(!empty($area_list))
                      @foreach($area_list as $val)
                        <option class="country" value="{{ $val['id'] }}">{{ $val['name'] }}</option>
                      @endforeach
                    @endif
                  </select>
                </div>
                <div class="input-group input-group-sm">
                  <select class="form-control select2" style="width: 150px;" id="search_user_province">
                    <option value="0">选择省/州</option>
                  </select>
                </div>
                <div class="input-group input-group-sm">
                  <select class="form-control select2" style="width: 150px;" id="search_user_city">
                    <option >选择城市</option>
                  </select>
                </div>
              </fieldset>
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <table id="user_data_list" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th style="width:200px;"></th>
                  <th>销售</th>
                  <th>客服</th>
                  <th>城市合伙人</th>
                  <th>KA</th>
                  <th>头像</th>
                  <th>用户类型</th>
                  <th>昵称</th>
                  <th>真实姓名</th>
                  <th>手机号码</th>
                  <th>公司</th>
                  <th>职位</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
              <tfoot>
                <tr>
                  <th></th>
                  <th>销售</th>
                  <th>客服</th>
                  <th>城市合伙人</th>
                  <th>KA</th>
                  <th>头像</th>
                  <th>用户类型</th>
                  <th>昵称</th>
                  <th>真实姓名</th>
                  <th>手机号码</th>
                  <th>公司</th>
                  <th>职位</th>
                </tr>
              </tfoot>
            </table>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
    </div>
    <a href="javascript:;" class="btn btn-success" onclick="saveUserServiceData()">保存数据</a>
  </section>
</div>
@endsection
@section('foot_js')
<script src="{{ asset('/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('/js/dataTables.bootstrap.min.js') }}"></script>
<script src="{{ asset('/js/jquery.slimscroll.min.js') }}"></script>
<script src="{{ asset('/js/fastclick.js') }}"></script>
<script src="{{ asset('/js/tools.js').'?v='.env('VERSION') }}"></script>
<script type="text/javascript">
var image_domain = '{{ env('IMAGE_DOMIAN').env('IMAGE_URL') }}';
var list_ajax;
var user_list_ajax;
var user_ids = '{{ $ids }}';
var user_ids_arr = [];//已绑定的用户数组
var new_user_ids_arr = [];//需要添加的用户数组
var admin_type = '{{ $admin_type }}';
$(function () {
  if(user_ids != ''){
    user_ids_arr = user_ids.split(',');
  }
  //提示信息
  var lang = {
    "sProcessing": "处理中...",
    "sLengthMenu": "每页 _MENU_ 项",
    "sZeroRecords": "没有匹配结果",
    "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
    "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
    "sInfoPostFix": "",
    "sSearch": "搜索:",
    "sUrl": "",
    "sEmptyTable": "无数据",
    "sLoadingRecords": "载入中...",
    "sInfoThousands": ",",
    "oPaginate": {
      "sFirst": "首页",
      "sPrevious": "上页",
      "sNext": "下页",
      "sLast": "末页",
      "sJump": "跳转"
    },
    "oAria": {
      "sSortAscending": ": 以升序排列此列",
      "sSortDescending": ": 以降序排列此列"
    }
  };
  //初始化表格
  list_ajax = $("#data_list").dataTable({
    language:lang,  //提示信息
    autoWidth: false,  //禁用自动调整列宽
    stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合
    processing: true,  //隐藏加载提示,自行处理
    serverSide: true,  //启用服务器端分页
    searching: false,  //禁用原生搜索
    orderMulti: false,  //启用多列排序
    order: [[0,'desc']],  //取消默认排序查询,否则复选框一列会出现小箭头
    renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
    pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
    columnDefs: [
      {
      "targets": [1,2,3,4,5,6,7,8,9,10,11,12],  //列的样式名
      "orderable": false    //包含上样式名‘nosort’的禁止排序
      },
      {
        targets: 5,
        render: function (data, type, row, meta) {
          var head_img = '';
          if(data != '' && data != null){
            if(data.indexOf('http') >= 0){
              head_img = "<img src='"+data+"' class='icon_img_css' />";
            }else{
              head_img = "<img src='"+image_domain+data+"' class='icon_img_css' />";
            }
          }
          return head_img;
        }
      },
      {
        targets: 6,
        render: function (data, type, row, meta) {
          var user_type = '';
          switch(data){
            case 0:
              user_type = '普通用户';
              break;
            case 1:
              user_type = '会员';
              break;
            case 2:
              user_type = '分享嘉宾';
              break;
          }
          return user_type;
        }
      },
      {
        targets: 12,
        title: "操作",
        render:function(data,type,row,meta){
          return  "<a href='javascript:void(0);' title='删除' aria-label='Delete' data-pjax='0' onclick='actionData("+row.id+","+row.user_id+")'><span class='glyphicon glyphicon-trash'></span></a>";
        }
      },
    ],
    ajax: function (data, callback, settings) {
      //封装请求参数
      var param = {};
      param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
      param.start = data.start;//开始的记录序号
      param.page = (data.start / data.length)+1;//当前页码
      param.order = data.order;
      param.search = data.search;
      param.admin_id = {{ $id }};
      param.user_id = $.trim($('#top_search_user_id').val());
      param.mobile = $.trim($('#top_search_mobile').val());
      param.real_name = $.trim($('#top_search_real_name').val());
      param.nick_name = $.trim($('#top_search_nick_name').val());
      $.ajax({
        type: "POST",
        url: '{{ URL('admin/service/relation/user/ajax') }}',
        cache: false,  //禁用缓存
        data: param,  //传入组装的参数
        dataType: "json",
        success: function (result) {
          var returnData = {};
          returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
          returnData.recordsTotal = result.total;//返回数据全部记录
          returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
          returnData.data = result.data;//返回的数据列表
          callback(returnData);
        }
      });
    },
    //列表表头字段
    columns: [
      {"data":"id"},
      {"data":"sale_name"},
      {"data":"service_name"},
      {"data":"citypartner_name"},
      {"data":"ka_name"},
      {"data":"head_img"},
      {"data":"user_type"},
      {"data":"nick_name"},
      {"data":"real_name"},
      {"data":"mobile"},
      {"data":"company"},
      {"data":"profession"},
      {"data":null},
    ],
  "fnDrawCallback":function(){
      $("#data_list_paginate").children('ul').append("<li style='margin-left:5px;'>&nbsp;&nbsp;<label style='margin-top:-5px;'>到第</lable>&nbsp;<input style='width:40px;hidden:none' class='margin text-center' id='changePage' type='text'>&nbsp;&nbsp;<label>页</lable>&nbsp;</li> <li style='margin-left:5px;float:right;' class='paginate_button'><a style='margin-bottom:5px' href='javascript:void(0);'id='dataTable-btn'>确认</a></li>");  
      var oTable = $("#data_list").dataTable();
      $('#dataTable-btn').click(function(e){
        if($("#changePage").val() && $("#changePage").val() > 0) {
          var redirectpage = $("#changePage").val() - 1;
        }else{
          var redirectpage = 0;
        }
        oTable.fnPageChange(redirectpage);
      });
    },
  }).api();

  user_list_ajax = $("#user_data_list").dataTable({
    language:lang,  //提示信息
    autoWidth: false,  //禁用自动调整列宽
    stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合
    processing: true,  //隐藏加载提示,自行处理
    serverSide: true,  //启用服务器端分页
    searching: false,  //禁用原生搜索
    orderMulti: false,  //启用多列排序
    order: [[0,'desc']],  //取消默认排序查询,否则复选框一列会出现小箭头
    renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
    pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
    columnDefs: [
      {
      "targets": [0,1,2,3,4,5,6,7,8,9,10,11],  //列的样式名
      "orderable": false    //包含上样式名‘nosort’的禁止排序
      },
      {
        targets: 0,
        data: "user_id",
        title: '编号',
        render: function (data, type, row, meta) {
            var checkbox_html = '';
             //如果已经绑定了自己-选中禁用
          var i = $.inArray(data.toString(),user_ids_arr);
          if(i >= 0){
            checkbox_html = '<td><input type="checkbox" name="class_checkbox" class_id='+data+' style="cursor: pointer;" checked="checked" onclick="return false;"> &nbsp;&nbsp;'+row.user_id+'</td>';
          }else{
            //能选中的用户
            checkbox_html = '<td><input type="checkbox" name="class_checkbox" class_id='+data+' style="cursor: pointer;" onclick="selectClass(this)"> &nbsp;&nbsp;'+row.user_id+'</td>';
            switch(admin_type){
              case '1':
                if(row.relation_service == 1){
                  checkbox_html = '<td><input type="checkbox" name="class_checkbox" class_id='+data+' style="cursor: pointer;" onclick="return false;"> &nbsp;&nbsp;'+row.user_id+'</td>';
                }
                break;
              case '2':
                if(row.relation_sale == 1){
                  checkbox_html = '<td><input type="checkbox" name="class_checkbox" class_id='+data+' style="cursor: pointer;" onclick="return false;"> &nbsp;&nbsp;'+row.user_id+'</td>';
                }
                break;
              case '3':
                if(row.relation_citypartner == 1){
                  checkbox_html = '<td><input type="checkbox" name="class_checkbox" class_id='+data+' style="cursor: pointer;" onclick="return false;"> &nbsp;&nbsp;'+row.user_id+'</td>';
                }
                break;
              case '4':
                if(row.relation_ka == 1){
                  checkbox_html = '<td><input type="checkbox" name="class_checkbox" class_id='+data+' style="cursor: pointer;" onclick="return false;"> &nbsp;&nbsp;'+row.user_id+'</td>';
                }
                break;
            }
          }
         
          return checkbox_html;
        }
      },
      {
        targets: 5,
        render: function (data, type, row, meta) {
          var head_img = '';
          if(data != '' && data != null){
            if(data.indexOf('http') >= 0){
              head_img = "<img src='"+data+"' class='icon_img_css' />";
            }else{
              head_img = "<img src='"+image_domain+data+"' class='icon_img_css' />";
            }
          }
          return head_img;
        }
      },
      {
        targets: 6,
        render: function (data, type, row, meta) {
          var user_type = '';
          switch(data){
            case 0:
              user_type = '普通用户';
              break;
            case 1:
              user_type = '会员';
              break;
            case 2:
              user_type = '分享嘉宾';
              break;
          }
          return user_type;
        }
      },
    ],
    ajax: function (data, callback, settings) {
      //封装请求参数
      var param = {};
      param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
      param.start = data.start;//开始的记录序号
      param.page = (data.start / data.length)+1;//当前页码
      param.order = data.order;
      param.search = data.search;
      param.user_id = $.trim($('#search_user_id').val());
      param.user_type = $('#search_user_type').val();
      param.nick_name = $.trim($('#search_nick_name').val());
      param.real_name = $.trim($('#search_real_name').val());
      param.mobile = $.trim($('#search_mobile').val());
      var country_name = $('#search_user_country').find("option:selected").text();
      var province_name = $('#search_user_province').find("option:selected").text();
      var city_name = $('#search_user_city').find("option:selected").text();
      param.country_name = country_name=='选择地区'?'':country_name;
      param.province_name = province_name=='选择省/州'?'':province_name;
      param.city_name = city_name=='选择城市'?'':city_name;
      $.ajax({
        type: "POST",
        url: '{{ URL('admin/user/data/ajax') }}',
        cache: false,  //禁用缓存
        data: param,  //传入组装的参数
        dataType: "json",
        success: function (result) {
          var returnData = {};
          returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
          returnData.recordsTotal = result.total;//返回数据全部记录
          returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
          returnData.data = result.data;//返回的数据列表
          callback(returnData);
        }
      });
    },
    //列表表头字段
    columns: [
      {"data":"user_id"},
      {"data":"sale_name"},
      {"data":"service_name"},
      {"data":"citypartner_name"},
      {"data":"ka_name"},
      {"data":"head_img"},
      {"data":"user_type"},
      {"data":"nick_name"},
      {"data":"real_name"},
      {"data":"mobile"},
      {"data":"company"},
      {"data":"profession"},
    ],
    "fnDrawCallback":function(){
      $("#user_data_list_paginate").children('ul').append("<li style='margin-left:5px;'>&nbsp;&nbsp;<label style='margin-top:-5px;'>到第</lable>&nbsp;<input style='width:40px;hidden:none' class='margin text-center' id='changePage-1' type='text'>&nbsp;&nbsp;<label>页</lable>&nbsp;</li> <li style='margin-left:5px;float:right;' class='paginate_button'><a style='margin-bottom:5px' href='javascript:void(0);'id='dataTable-btn-1'>确认</a></li>");  
      var oTable = $("#user_data_list").dataTable();
      $('#dataTable-btn-1').click(function(e){
        if($("#changePage-1").val() && $("#changePage-1").val() > 0) {
          var redirectpage = $("#changePage-1").val() - 1;
        }else{
          var redirectpage = 0;
        }
        oTable.fnPageChange(redirectpage);
      });
    },
  }).api();
});
function searchData(){
  $("#user_data_list").dataTable().fnDraw(false);
}
function searchTopData(){
  $("#data_list").dataTable().fnDraw(false);
}
function actionData(id,user_id){
  var result = confirm("是否确认删除？");
  if(result){
    var url = "{{ URL('admin/service/data/delete') }}";
    var data = {id:id};
    var result = puppet.myajax('post',url,data,false);
    if(result.code == 1){
      puppet.mesFailure(result.msg);
      return false;
    }else{
      dataHandle(String(user_id),false);
      // list_ajax.ajax.reload(null,false);
      // user_list_ajax.ajax.reload(null,false);
      location.reload();

    }
  }
  return false;
}

function dataHandle(id,status = true){
//  console.log(user_ids_arr);
  var i = $.inArray(id,user_ids_arr);//是否存在
  if(status === true){//添加
    if(i < 0){     //不存在，添加到新用户数组
        new_user_ids_arr.push(id);
//      console.log(new_user_ids_arr);
    }
  }
  return true;
}
function selectClass(obj){
  var id = $(obj).attr('class_id');
  if($(obj).is(':checked')){
    dataHandle(id);
  }
}
function saveUserServiceData(){
  var url = "{{ URL('admin/service/data/save') }}";
  var data = {id:'<?php echo $id;?>',ids:new_user_ids_arr.join(',')};
  var result = puppet.myajax('post',url,data,false);
  if(result.code == 1){
    puppet.mesFailure(result.msg);
    return false;
  }else{
    // list_ajax.ajax.reload(null,false);
    // user_list_ajax.ajax.reload(null,false);
    //刷新页面，如果不刷新刚刚保存的还是未选中状态
    location.reload();
  }
}
$("#search_user_country").change(function(){
    var country_id = $(this).val();
    if(country_id == 0){
        $("#search_user_province option[class='province']").remove();
        $("#search_user_city option[class='city']").remove();
        return;
    }
    var url = "{{URL('admin/user/province/list/ajax')}}";
    var data = {country_id:country_id};
    var result = puppet.myajax('post',url,data,false);
    if(result.code == 1){
        puppet.mesFailure(result.msg);
        return false;
    }else{
        $("#search_user_province option[class='province']").remove();
        if(result !=''){
            var html = '';
            $.each(result,function(key,val){
                html += '<option class="province" value='+val.id+'>'+val.name+'</option>';
            });
            $(html).appendTo($("#search_user_province"));
        }
    }
});

$("#search_user_province").change(function(){
    var province_id = $(this).val();
    if(province_id == 0){
        $("#search_user_city option[class='city']").remove();
        return;
    }
    var url = "{{URL('admin/user/city/list/ajax')}}";
    var data = {province_id:province_id};
    var result = puppet.myajax('post',url,data,false);
    if(result.code == 1){
        puppet.mesFailure(result.msg);
        return false;
    }else{
        $("#search_user_city option[class='city']").remove();
        if(result !=''){
            var html = '';
            $.each(result,function(key,val){
                html += '<option class="city" value='+val.id+'>'+val.name+'</option>';
            });
            $(html).appendTo($("#search_user_city"));
        }
    }
});
</script>
@endsection